<!--
 * @Author: gaotang
 * @Date: 2025年01月03日
 * @Email: qq23745038@126.com
 * @LastEditors: gaotang
 * @LastEditTime: 2025-01-03 18:37:57
-->
<template>
  <div class="page-warp">
    <ItemWrap4 title="货主货量排名" :type="'leftboxbg1'" style="width: 390px; height: 310px; margin: 10px auto 25px auto;">
      <Top style="margin-top: 0px" @chartClick="chartClick0" />
    </ItemWrap4>
    <ItemWrap4 :title="mapTitle + '发货品类'" :type="'leftboxbg1'"
      style="width: 390px; height: 310px; margin: 10px auto 25px auto;">
      <Bottom style="margin-top: 0px" @chartClick="chartClick1" />
    </ItemWrap4>
    <ItemWrap4 :title="mapTitle + '常发专线'" v-if="type === 'Center'" :type="'leftboxbg1'"
      style="width: 390px; height: 310px; margin: 10px auto 25px auto;">
      <BigTopRight style="margin-top: 0px" @chartClick="chartClick2" />
    </ItemWrap4>
    <ItemWrap4 title="常发线路" v-if="type === 'Center'" :type="'leftboxbg1'"
      style="width: 390px; height: 310px; margin: 10px auto 25px auto;">
      <BigBottomLeft style="margin-top: -10px" @chartClick="chartClick3" />
    </ItemWrap4>
    <ItemWrap4 :title="mapTitle + '发货价格'" v-if="type === 'Center' || type === 'LeftRight' || type === 'RightLeft'"
      :type="'leftboxbg1'" style="width: 815px; height: 310px; margin: 10px auto 25px auto;">
      <BigBottomRight style="margin-top: -10px" @chartClick="chartClick4" />
    </ItemWrap4>
  </div>
</template>

<script>
import Top from './top.vue';
import Bottom from './bottom.vue';
import BigTopRight from './bigTopRight.vue';
import BigBottomLeft from './bigBottomLeft.vue';
import BigBottomRight from './bigBottomRight.vue';

export default {
  name: 'ALeftLeft',
  components: {
    Top,
    Bottom,
    BigTopRight,
    BigBottomLeft,
    BigBottomRight
  },
  props: {
    type: {
      type: String,
      default: 'LeftLeft',
    }
  },
  data() {
    return {
      mapTitle: '朝阳商贸'
    };
  },
  created() {
  },
  methods: {
    chartClick0(params) {
      this.mapTitle = `${params.name}`;
      this.chartClick('ALeftLeftTopLeft', params);
    },
    chartClick1(params) {
      this.chartClick('ALeftLeftTopCenter', params);
    },
    chartClick2(params) {
      this.chartClick('ALeftLeftTopRight', params);
    },
    chartClick3(params) {
      this.chartClick('ALeftLeftBottomLeft', params);
    },
    chartClick4(params) {
      this.chartClick('ALeftLeftBottomRight', params);
    },
    chartClick(name, params) {
      this.$emit('chartClick', { name, type: this.type, options: params });
    },
    // chartClick(params) {
    //   console.log('点击的数据:', params);
    //   this.isMapClick = true;
    //   const { name, event } = params;
    //   this.mapTitle = `${name
    //     }`;
    //   // this.offsetX = event.offsetX + 10 + 'px';
    //   // this.offsetY = event.offsetY + 40 + 'px';

    //   // this.showData = true; 
    // }
  }
};
</script>

<style lang="scss" scoped>
.page-warp {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  // margin: 0 38px
}
</style>
